<template>
	<view class="diy-community">
		<block v-if="value.style == 1">
			<view class="community-style1" :style="{backgroundColor: value.backgroundColor}">
				<view class="community-style1-left" :style="{color: value.textColor}">
					<text class="iconfont iconmendian1"></text>
					<text class="community-address">{{community ? community : '请选择社区自提点'}}</text>
				</view>
				<view class="community-style1-right" :style="{color: value.textColor}" @click="toChange">
					<text>点击切换</text>
					<text class="iconfont iconright"></text>
				</view>
			</view>
		</block>
		
		<block v-if="value.style == 2">
			<view class="community-style1 community-style2" :style="{backgroundColor: value.backgroundColor}">
				<view class="community-style1-left" :style="{color: value.textColor}">
					<text class="iconfont iconmendian1"></text>
					<text class="community-address">{{community ? community : '请选择社区自提点'}}</text>
				</view>
				<view class="community-style1-right" :style="{color: value.textColor}" @click="toChange">
					<text>点击切换</text>
					<text class="iconfont iconright"></text>
				</view>
			</view>
		</block>
		
		<ns-login ref="login"></ns-login>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js';
export default {
	name: 'diy-community',
	props: {
		value: {
			type: Object
		}
	},
	mixins: [globalConfig],
	data() {
		return {
			token: '',
			community: '',
			latitude: null,
			longitude: null
		};
	},
	created() {
		this.$store.commit('setDiyCommunity', 1);
		this.token = uni.getStorageSync('token');
	},
	computed: {
		tokenStore() {
			this.getAddress();
			return this.$store.state.tokenStore;
		},
		diyCommunity() {
			this.getAddress();
			return this.$store.state.diyCommunity;
		}
	},
	watch:{
		tokenStore(val, old) {
			this.getAddress();
		}
	},
	methods: {
		getAddress() {
			this.$api.sendRequest({
				url: '/api/community/getMemberCommunity',
				// data: {
				// 	token: this.token
				// },
				success: res => {
					if (res.code >= 0) {
						this.community = res.data.community;
						this.latitude = res.data.latitude;
						this.longitude = res.data.longitude;
						
						this.$store.commit('setDiyCommunity', 0);
					} else {
						this.community = '';
						this.$store.commit('setDiyCommunity', 0);
					}
				},
				fail: res => {
					this.$util.showToast({
						title: res.message
					})
				}
			})
		},
		toChange() {
			if (this.tokenStore) {
				if (this.latitude && this.longitude) {
					this.$util.redirectTo('/otherpages/community/community_choose/community_choose', {lat_old: this.latitude, log_old: this.longitude, name: this.community});
				} else {
					this.$util.redirectTo('/otherpages/community/community_choose/community_choose');
				}
				this.$store.commit('setDiyCommunity', 0);
			} else {
				this.$refs.login.open('/pages/index/index/index');
			}
		}
	}
};
</script>

<style lang="scss">
	.community-style1 {
		width: 100%;
		border-radius: 10rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.community-style1-left {
			display: flex;
			align-items: center;
			width: calc(100% - 160rpx);
			
			.iconfont {
				font-size: 32rpx;
				line-height: 1;
				margin-right: 10rpx;
			}
			
			.community-address {
				width: calc(100% - 36rpx);
				font-size: 26rpx;
				line-height: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		
		.community-style1-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 24rpx;
			width: 160rpx;
			line-height: 1;
			
			.iconfont {
				font-size: 28rpx;
			}
		}
	}
	
	.community-style2 {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, .3);
	}
</style>
